<html>

<head>
    <meta charset="utf-8" />
    <title>这是标题</title>

    <style>
        /* 
            选择器的优先级:
            0.!important  加在选择器后边，则成为优先级最高的选择器
            1.行内样式大于其他
            2.外部样式和内部样式，会根据顺序写入一个文档流，谁最后写入谁生效
            3.id选择器>
                属性选择器=伪类选择器(谁在后谁生效)>
                    类选择器>
                        标签选择器>
                            全局选择器
            4.部分属性会有子父传递的效果，
            父容器的样式会传递给子容器，子容器具有相同的样式，
            但是优先级最低，一旦子容器有样式，那么会覆盖父容器传递的样式。
        
        */
        * {
            /*全局选择器*/
            color: yellow;
        }

        p {
            color: blue;
        }

        .oneClass {
            color: green;
        }

        p[class] {
            color: rebeccapurple !important;
        }

        p:first-child {
            color: chartreuse;
        }

        #one {
            color: red;
        }

        div {
            background-color: green;
        }

        span {
            background-color: red;
        }
    </style>
</head>



<body>
    <p id="one" class="oneClass" style="color: orange;">段落</p>
    <div>
        父容器
        <span>子容器</span>
    </div>
</body>

</html>